<template>
    <p>Home</p>
    <van-button type="primary">按钮</van-button>


<p>组合式api写法</p>
<p>count:{{count}}</p>
<p>test:{{test}}</p>

<p>reactive写法=======</p>
<p>obj:{{obj}}</p>
<p>obj.name:{{obj.name}}</p>
<p>arr:{{ arr }}</p>

<p>computed</p>
<p>countAddFive:{{countAddFive  }}</p>

<p>methods</p>
<button @click="countAddOne">count+1</button>
<button @click="countAddTwo">count+2</button>
<button @click="updateObj">更新obj</button>

<p>组件</p>
<Son :foo="obj.name" :age="obj.age" />


</template>
<script >
import {ref,reactive,computed,watch} from 'vue'
import Son from './Son.vue'
export default {
    components:{
        Son
    },
    setup(){
        const count = ref(0)
        const test =ref('hello world')
        console.log(count.value);
        count.value =1

        const obj = reactive({
            name:'tom',
            age:12
        })

        const arr =reactive([1,2,3,4])


        //computed
        const countAddFive =computed(()=>{
            return count.value +5
        })

        //methods
        function countAddOne(){
            count.value++
        }
        const countAddTwo =()=>{
            count.value++
        }
        const updateObj =()=>{
            updateObjName()
        }
        const updateObjName =()=>{
            obj.name ='jerry'
        }



        //watch
        watch(count,(newVal,oldVal)=>{
            console.log('count触发了');
            console.log('newVal',newVal);
            console.log('oldVal',oldVal);
        })
        watch(countAddFive,(newVal,oldVal)=>{
            console.log('countAddFive触发了');
            console.log('newVal',newVal);
            console.log('oldVal',oldVal);
        })
        watch(obj,(newVal,oldVal)=>{
            console.log('countAddFive触发了');
            console.log('newVal',newVal);
            console.log('oldVal',oldVal);
        })
        watch(() =>obj,name,(newVal,oldVal)=>{
            console.log('obj.name触发了');
            console.log('newVal',newVal);
            console.log('oldVal',oldVal);
        })




        return{
            count,
            test,
            obj,
            arr,
            countAddFive,
            countAddOne,
            countAddTwo,
            updateObj,
            updateObjName
        }
        
    }
}



</script>